<template>
    <div class="search_tool">
        <!-- 无限极递归联动(后端返回固定数据格式) -->
        <div class="select_left">
            <van-dropdown-menu  active-color="#02ccbd">
                <van-dropdown-item :title="title" ref="organization">
                    <div class="organization_list">
                        <van-loading size="24px" vertical v-if="isDisabled">加载中...</van-loading>
                        <ms-form-organization  v-else :organization="organizationTree" :organizationNavsProps="organizationNavsProps"  @organizationNavs="organizationNavs"></ms-form-organization>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="search_right">
            <van-search v-model="searchValue" placeholder="请输入搜索关键词" show-action shape="round" @search="onSearch">
                <div slot="action" @click="onSearch">搜索</div>
            </van-search>
        </div>
    </div>
</template>
<script>
import MsFormOrganization from '@/components/FormOrganization'
export default {
    name:'SearchData',
    data(){
        return {
            searchValue:'',
        }
    },
    components: {
        MsFormOrganization
    },
    props:{
        isDisabled:{
            type:Boolean,
            default:true
        },
        title:{
            type:String,
            default:'组织'
        },
        organizationTree:{
            type:Array,
            default:()=>[]
        },
        organizationNavsProps:{
            type:Array,
            default:()=>[]
        }
    },
    methods:{
        onSearch(){
            this.$emit('searchData',this.searchValue);
        },
        //筛选组织
        organizationNavs(data){
            // console.log(data);
            if (data && data.length>0) {
                let curData = data[data.length-1];
                // this.title = curData.label;
                this.$emit('organizationNavs',curData);
                this.$emit('updateTitle',curData.label);
                this.$refs.organization.toggle();
            } else if(Object.prototype.toString.call(data)==='[object Object]') {
                // this.$toast('请先选择')
                // console.log('对象')
                // this.title = data.label;
                this.$emit('organizationNavs',data);
                this.$emit('updateTitle',data.label);
                this.$refs.organization.toggle();
            }else{
                // console.log('未选择')
                // this.title = '组织';
                this.$emit('organizationNavs',{
                    value: "0",
                    label: "组织"
                });
                this.$emit('updateTitle','组织');
                this.$refs.organization.toggle();
            }
        }
    },
}
</script>
<style lang="less" scoped>
    .search_tool{
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .select_left{
            min-width: 50px;
            max-width: 80px;
            max-height: 380px;
            overflow: hidden;
            padding-left: 10px;
            .van-dropdown-menu{height: 44px;}
            /deep/ .van-dropdown-menu__bar{height: 44px;background: none;box-shadow: none;}
            /deep/.van-dropdown-menu__item{flex: auto;justify-content: flex-start;}
            /deep/.van-dropdown-menu__title{padding-left: 0;font-size: 12px;padding-right: 5px;max-width: 90%;}
            .organization_list{
                width: 100%;
                height: 335px;
                background: #fff;
                overflow: hidden;
            }
        }
        .search_right{
            flex-grow: 1;
            .van-search{
                height: 44px;
                line-height: 44px;
                padding-top: 0;
                padding-bottom: 0;
                padding-left: 5px;
            }
            .van-search__action{
                height: 44px;
                line-height: 44px;
            }
        }
    }
    /deep/ .van-loading{text-align: center;}
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>